<template>
  <div class="container">
    <div v-if="!showDetail">
      <!-- 搜索 -->
      <table>
        <tr>
          <th style="width:160px;">
            <span>校区：</span>
            <el-button @click="openCampusList = true" type="text">
              <span v-if="campusSelect">{{campusSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th style="width:160px;">
            <span>功能区：</span>
            <el-button @click="openAreaList = true" type="text">
              <span v-if="areaSelect">{{areaSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th style="width:160px;">
            <span>场地：</span>
            <el-button @click="openFieldList = true" type="text">
              <span v-if="fieldSelect">{{fieldSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th style="width:160px;">
            <span>状态：</span>
            <el-button @click="openStatusList = true" type="text">
              <span v-if="statusSelect">{{statusSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th style="width:160px;">
            <el-button type="primary" icon="el-icon-search" @click="getFieldApply">搜索</el-button>
          </th>
        </tr>
      </table>
      <!-- 场地筛选 -->
      <el-dialog title="选择场地" :visible.sync="openFieldList">
        <el-input placeholder="请输入关键字" v-model="fieldKeyword">
          <template slot="prepend">场地名称</template>
          <el-button slot="append" icon="el-icon-search" @click="getFieldByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="fieldSelect">
          <el-radio
            v-for="(field, index) in fieldList"
            :key="'field'+index"
            :label="field"
          >{{field.name}}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="fieldSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openFieldList = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 校区筛选 -->
      <el-dialog title="选择校区" :visible.sync="openCampusList">
        <el-input placeholder="请输入关键字" v-model="campusKeyword">
          <template slot="prepend">校区名</template>
          <el-button slot="append" icon="el-icon-search" @click="getCampusByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="campusSelect">
          <el-radio
            v-for="(campus, index) in campusList"
            :key="'campus' + index"
            :label="campus"
          >{{ campus.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="campusSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openCampusList = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 功能区筛选 -->
      <el-dialog title="选择功能区" :visible.sync="openAreaList">
        <el-input placeholder="请输入关键字" v-model="areaKeyword">
          <template slot="prepend">功能区名</template>
          <el-button slot="append" icon="el-icon-search" @click="getAreaByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="areaSelect">
          <el-radio
            v-for="(area, index) in areaList"
            :key="'area' + index"
            :label="area"
          >{{ area.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="areaSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openAreaList = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 申请状态筛选 -->
      <el-dialog title="选择场地" :visible.sync="openStatusList">
        <el-input placeholder="请输入关键字" v-model="statusKeyword">
          <template slot="prepend">状态名</template>
          <el-button slot="append" icon="el-icon-search" @click="getStatusByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="statusSelect">
          <el-radio
            v-for="(status, index) in statusList"
            :key="'status' + index"
            :label="status"
          >{{ status.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="statusSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openStatusList = false">确 定</el-button>
        </div>
      </el-dialog>

      <hr />
      <el-table
        :data="fieldAppyList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        stripe
        border
        @row-click="rowClick"
      >
        <el-table-column prop="field.name" label="场地名称" />
        <el-table-column prop="field.fieldType.name" label="场地类型" />
        <el-table-column prop="applicant" label="申请人" />
        <el-table-column prop="application" label="用途" />
        <el-table-column prop="applyTime" label="申请的时间段" />
        <el-table-column prop="status" label="状态" />
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        style="margin-left: 30%;"
      ></el-pagination>
    </div>
    <div v-else>
      <fieldApplyDetails
        :fieldApplyDetails="fieldApplyDetails"
        @closeDetailDialog="closeDetailDialog"
      />
    </div>
  </div>
</template>

<script>
import fieldApplyDetails from "@/views/education-collegeField/field-apply/details";

export default {
  name: "Area",
  data() {
    return {
      tableTotal: 0,
      currentPage: 1,
      pagesize: 10,
      showDetail: false, //申请场地详情显示
      fieldApplyDetails: {}, //某一行场地申请的详情
      fieldAppyList: [], //场地申请列表

      campusList: [], //校区列表
      openCampusList: false, //校区筛选框显示
      campusSelect: "", //选择的校区
      campusKeyword: "", //校区关键词

      areaList: [], //功能区列表
      openAreaList: false, //功能区筛选显示
      areaSelect: "", //选择的功能区
      areaKeyword: "", //关键词

      fieldList: [], //场地列表
      fieldSelect: "", //选择的场地
      openFieldList: false, //场地刷选显示
      fieldKeyword: "", //场地关键词

      openStatusList: false, //状态筛选显示
      statusSelect: "", //选择的状态
      statusList: [], //状态列表
      statusKeyword: "", //状态关键词
    };
  },
  components: {
    fieldApplyDetails,
  },
  created() {
    //获取场地申请
    this.getFieldApplyList();
    //获取功能区列表
    this.getAreaList();
    //获取校区列表
    this.getSchoolList();
    //获取场地列表
    this.getFieldList();
    //获取状态列表
    this.getStatusList();
  },
  methods: {
    //获取场地申请
    getFieldApplyList() {
      this.fieldAppyList = [
        {
          id: "01",
          applyTime: "", //申请时间段
          applicant: "", //申请人
          application: "", //申请理由
          status: "", //申请状态
          telephone: "", //申请人联系电话
          field: {
            id: "01", //编号
            name: "第一教学楼", //名称
            english_name: "", //英文名称
            telephone: "", //电话号码
            discription: "", //描述
            campus: { id: "01", name: "主校区", discription: "" }, //校区
            area: { id: "01", name: "美术楼", discription: "" }, //功能区
            fieldType: { id: "01", name: "室内", discription: "" }, //场地类型
            by_who: { id: "01", name: "张三" }, //负责人
            create_time: "", //创建时间
          },
          create_time: "", //申请时间
        },
        {
          id: "01",
          applyTime: "", //申请时间段
          applicant: "", //申请人
          application: "", //申请理由
          status: "", //申请状态
          telephone: "", //申请人联系电话
          field: {
            id: "01", //编号
            name: "第一教学楼", //名称
            english_name: "", //英文名称
            telephone: "", //电话号码
            discription: "", //描述
            campus: { id: "01", name: "主校区", discription: "" }, //校区
            area: { id: "01", name: "美术楼", discription: "" }, //功能区
            fieldType: { id: "01", name: "室内", discription: "" }, //场地类型
            by_who: { id: "01", name: "张三" }, //负责人
            create_time: "", //创建时间
          },
          create_time: "", //申请时间
        },
      ];
    },

    //获取功能区列表
    getAreaList() {
      this.areaList = [
        {
          id: "12345",
          college_id: "123456789",
          school_id: "12345678",
          name: "第一教学楼",
          english_name: "The first teaching building",
          telephone: "18023649352",
          discription: "暂无描述",
          create_time: "2020-6-12 20:30:00",
          by_who: "（userid）",
        },
        {
          id: "12346",
          college_id: "123456789",
          school_id: "12345678",
          name: "第二教学楼",
          english_name: "The second teaching building",
          telephone: "18023649352",
          discription: "暂无描述",
          create_time: "2020-6-12 20:30:00",
          by_who: "（userid）",
        },
      ];
    },

    //获取校区列表
    getSchoolList() {
      this.campusList = [
        { id: "1", name: "主校区" },
        { id: "2", name: "星湖校区" },
      ];
    },

    //获取场地列表
    getFieldList() {
      this.fieldList = [
        {
          id: "01", //编号
          name: "第一教学楼", //名称
          english_name: "", //英文名称
          telephone: "", //电话号码
          discription: "", //描述
          campus: { id: "01", name: "主校区", discription: "" }, //校区
          area: { id: "01", name: "美术楼", discription: "" }, //功能区
          fieldType: { id: "01", name: "室内", discription: "" }, //场地类型
          by_who: { id: "01", name: "张三" }, //负责人
          create_time: "", //创建时间
        },
        {
          id: "02",
          name: "第二教学楼",
          english_name: "",
          telephone: "",
          discription: "",
          campus: { id: "02", name: "星湖校区", discription: "" }, //校区
          area: { id: "02", name: "第一教学楼", discription: "" },
          fieldType: { id: "02", name: "室内", discription: "" },
          by_who: { id: "02", name: "李四" }, //创建者
          create_time: "",
        },
        {
          id: "03",
          name: "第三教学楼",
          english_name: "",
          telephone: "",
          discription: "",
          campus: { id: "03", name: "主校区", discription: "" }, //校区
          area: { id: "03", name: "实验楼", discription: "" },
          fieldType: { id: "03", name: "室内", discription: "" },
          by_who: { id: "03", name: "王五" }, //创建者
          create_time: "",
        },
      ];
    },

    //获取状态列表
    getStatusList() {
      this.statusList = [
        { id: "01", name: "未通过" },
        { id: "02", name: "已结束" },
        { id: "03", name: "审核中" },
        { id: "04", name: "队列中" },
      ];
    },

    //条件搜索
    getFieldApply() {},

    //根据关键词搜索状态
    getStatusByKeyword() {},

    //根据关键词搜索功能区
    getAreaByKeyword() {},

    //根据关键词搜索校区
    getCampusByKeyword() {},

    //根据关键词搜索场地
    getFieldByKeyword() {},

    //点击某一行，显示场地申请详情
    rowClick(val) {
      this.fieldApplyDetails = val;
      this.showDetail = true;
    },

    //详情组件传来的数据
    closeDetailDialog(val) {
      this.showDetail = val;
    },

    // 换页
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>

<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
span {
  font-weight: 500;
}
th {
  text-align: left;
}
</style>
